<template>
  <div class="main_right_footer" ref="leftBottom">
    <div class="main_right_footer_top">
      <span class="title">TOP商户榜(交易笔数)</span>
    </div>
    <div class="box_mian_top">
      <el-table
        :data="dataCopy"
        :header-cell-style="{
          backgroundColor: 'transparent',
          color: '#fff',
          textAlign: 'center',
          border :0
        }"
        :cell-style="{
          backgroundColor: 'transparent',
          color: '#fff',
          textAlign: 'center',
        }"
        :row-style="{
          backgroundColor: 'transparent',
          color: '#fff',
        }"
      >
        <el-table-column prop="BusinessRank" label="#">
          <template #default="{ row }">
            <span :class="row.BusinessRank <= 3 ? 'RankStyle' : ''">
              {{ row.BusinessRank }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="BusinessName" label="商户名称">
        </el-table-column>
        <el-table-column prop="BusinessNumber" label="商户号">
        </el-table-column>
        <el-table-column prop="BusinessTotal" label="总量"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "main_right_footer",
  props: {
    data: {
      type: Array,
      default: () => [
        {
          BusinessRank: 1,
          BusinessName: "黄鹤楼01",
          BusinessNumber: "1000001",
          BusinessTotal: "222",
        },
        {
          BusinessRank: 2,
          BusinessName: "黄鹤楼02",
          BusinessNumber: "1000002",
          BusinessTotal: "111",
        },
        {
          BusinessRank: 3,
          BusinessName: "黄鹤楼03",
          BusinessNumber: "1000003",
          BusinessTotal: "3333",
        },
        {
          BusinessRank: 4,
          BusinessName: "黄鹤楼04",
          BusinessNumber: "1000004",
          BusinessTotal: "4444",
        },
        {
          BusinessRank: 5,
          BusinessName: "黄鹤楼05",
          BusinessNumber: "1000005",
          BusinessTotal: "5555",
        },
        {
          BusinessRank: 6,
          BusinessName: "黄鹤楼06",
          BusinessNumber: "1000006",
          BusinessTotal: "6666",
        },
      ],
    },
  },
  data() {
    return {
      dataCopy: this.data.slice(0, 5),
      timer: null,
      bg: {
        backgroundColor: "transparent",
      },
    };
  },
  created() {
    this.setCopyData();
  },
  methods: {
    setCopyData() {
      let i = -1;
      this.timer = setInterval(() => {
        ++i;
        if (i === this.data.length) {
          i = 0;
        }
        this.dataCopy.splice(0, 1);
        this.dataCopy.push(this.data[i]);
      }, 1500);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped lang="css">
.main_right_footer {
  height: 100%;
  width: 100%;
}
.main_right_footer_top {
  height: 46px;
  min-width: 400px;
  width: 200px;
  background-image: url("../../../assets/5r678Fx1_1583817896809_okN8qlk6u.png");
  background-repeat: no-repeat;
  background-size: 729px 46px;
}
.main_right_footer .title {
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  font-weight: normal;
  text-align: left;
  letter-spacing: 4px;
  line-height: 44px;
  color: #fff;
  text-shadow: rgb(84 76 255) 0px 0px 8px;
}
.box_mian_top {
  min-height: 150px;
  min-width: 400px;
  width: 200px;
  padding: 10px;
  background-color: transparent;
}
.RankStyle {
  padding: 1px 10px 1px 10px;
  border: 1px solid #4740ce;
  border-top: 1px solid #4740ce;
}
.box_mian_top /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.box_mian_top /deep/ .el-table tr {
  background-color: transparent !important;
}
.box_mian_top /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
.box_mian_top /deep/ .el-table__row > td {
  border: none;
}
/* 清除底部横线 */
.el-table::before {
  height: 0px;
}
</style>
